<template>
  <!-- UnlockContactWayPreview 解锁联系方式 -->
  <PageContainer>
    <view class="container">
      <FullLoading :full-loading="isFullLoading" />
      <Header title="解锁联系方式" />

      <view class="bgf pa-15">
        <view class="orderStatus">
          <view class="pt-19 statusLaber">待支付后解锁</view>
          <view class="pt-9 pb-21 color2 fz-12">支付后即可查看联系方式</view>
        </view>
      </view>

      <MemberCardItem v-if="contactInfo" :item="contactInfo" margin-bottom="30rpx" />

      <view class="order-price">
        <text>实付金额</text>
        <text class="price">{{ formatMoney({ money: payMoney, showFreeText: true }) }}</text>
      </view>

      <TButtonGroup :styles="{ backgroundColor: '#FFFFFF' }">
        <template #header>
          <view class="slotBox">
            <text>合计</text>
            <text class="plice">{{ formatMoney({ money: payMoney, showFreeText: true }) }}</text>
          </view>
        </template>
        <TButton class="gutter-btn" text="立即支付" :type="'primary'" @click="confirm" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  UnlockContactWayPreview  解锁联系方式 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { redirectTo, onLoad, navigateBack } from '@/router';
  import { memberContactsCreateOrder, memberContactsCreateSuborder } from '@/api/order';
  import { formatMoney } from '@/utils/number';
  import { ref, unref } from 'vue';
  import type { CreateOrderData, MemberContactsVo } from '@/api/order/types';
  import FullLoading from '@/components/FullLoading/index.vue';
  import { requestPayment } from '../utils/payment';
  import { UniEmitNameEnum } from '@/enums/uniEmitEnum';
  import MemberCardItem from '@/components/ContactsMap/components/MemberCardItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { Toast } from '@/utils';

  const contactInfo = ref<MemberContactsVo>();
  const payMoney = ref(0);
  const isFullLoading = ref(true);
  const apiData = ref<CreateOrderData>();

  onLoad<'UnlockContactWayPreview'>((op) => {
    apiData.value = {
      orderType: op.orderType,
      memberLeadingId: op.memberLeadingId,
    };
    memberContactsCreateSuborder(apiData.value).then((r) => {
      if (r.orderCode) {
        redirectTo({ name: 'unlockOrder', options: { orderCode: r.orderCode } });
      } else {
        contactInfo.value = r.memberContactsVo;
        payMoney.value = r.payMoney;
        isFullLoading.value = false;
      }
    });
  });

  function success() {
    Toast({
      title: '解锁成功',
      icon: 'success',
      success: () => {
        uni.$emit(UniEmitNameEnum.REFRESHPREVIOUSPAGE);
        navigateBack();
      },
    });
  }

  async function confirm() {
    if (!apiData.value) return;
    const { payCode } = await memberContactsCreateOrder(apiData.value);
    if (unref(payMoney) <= 0) {
      success();
    } else {
      requestPayment(payCode).then((r) => {
        success();
      });
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 200rpx;
  }

  .orderStatus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff4e7;
    border-radius: 20rpx;

    .statusLaber {
      color: #b47026;
      font-size: 38rpx;
      font-weight: bold;
    }
  }

  .slotBox {
    width: calc(100% - 300rpx);
    padding-left: 30rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    .plice {
      color: #b47026;
      padding-left: 28rpx;
      font-size: 32rpx;
    }
  }

  .order-price {
    height: 100rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin-top: 2rpx;
    .price {
      color: #b47026;
    }
  }
</style>
